<template>
	<view class="u-page">
		<view class="header">
		</view>
		<view class="content">

			<view class="projectList">
				<view class="label">签约的合同</view>
				<block v-for="(item, index) in lists" :key="index">
					<view class="lists">
						<view class="filename">
							<image src="../../../static/icon/file.png" mode=""></image>
						</view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.filename}}</view>
						</view>
						<view class="chakan" @click="downLoadFile(item.filepath)">
							<view>查看</view>
						</view>
						<image src="../../../static/icon/downlow.png" style="width: 16px;height: 16px;" mode=""></image>
					</view>
				</block>
				<view class="upFiles">
					<uni-file-picker v-model="value" file-mediatype="all" auto-upload="true" limit="1" @select="select"
						@progress="progress" @success="success" @fail="fail">
						<button type="warn">上传合同</button>
					</uni-file-picker>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: '',
				token: '',
				qiniuaddr: this.QiniuUrl,
				lists: [{
						"filename": "1111",
						"filepath": "https://cdn.uviewui.com/uview/album/2.jpg"
					},
					{
						"filename": "2222",
						"filepath": "https://cdn.uviewui.com/uview/album/2.jpg"
					},
				],
				formData: {
					filepath: '',
					filename: "",
				}
			}
		},
		onLoad(data) {
			this.pid = data.id


			this.filesList();
			this.QiniuToken();
		},
		methods: {
			QiniuToken() {
				// console.log('url',this.HttpServe+'/Welcome/QiniuToken',)
				const token = uni.request({
					url: this.HttpServe + '/Welcome/QiniuToken',
					method: 'post',
					success: (res) => {
						// console.log('1-----------',res);
						this.token = res.data.data;
					}
				})
				// console.log('111111',token)
			},
			select(e) {
				console.log('选择文件：', e)

				let data = e.tempFiles
				// data.forEach(item=>{
				this.upload(data)
				// })
			},
			upload(imgPath) {
				let _this = this
				var time = new Date().getTime();
				imgPath.forEach(function(item, index, array) {
					// console.log('2222',item)
					_this.formData.filename = item.name
					const filename = time + item.cloudPath;
					uni.uploadFile({
						url: 'http://upload-z2.qiniup.com',
						name: 'file',
						filePath: item.path,
						header: {
							"Content-Type": "multipart/form-data"
						},
						formData: {
							token: _this.token, //后端返回的token
							key: filename,
						},
						success: function(res) {
							let key = JSON.parse(res.data).key;
							_this.formData.filepath = _this.qiniuaddr + "/" + key;
							_this.upfiles()
						},
						fail: function(res) {
							console.log(res)
						}
					});
				})
			},
			async upfiles() {
				console.log('1111', this.formData)

				const files = await this.GQL({
					"operationName": "createSlProjectContractFile",
					"query": "mutation createSlProjectContractFile($input: CreateSlProjectContractFileInput!) { createSlProjectContractFile(input: $input) { slProjectContractFile { id pid } } }",
					"variables": {
						"input": {
							"slProjectContractFile": {
								"filename": this.formData.filename,
								"filepath": this.formData.filepath,
								"pid": this.pid,
								'uid': uni.getStorageSync('userData').uid
							}
						}
					}
				})
				if (files.data.createSlProjectContractFile.slProjectContractFile.nodes != '') {
					this.filesList()
				}

			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			async filesList() {
				console.log('1111', this.type)
				const files = await this.GQL({
					"operationName": "allSlProjectContractFiles",
					"query": "query allSlProjectContractFiles($filter: SlProjectContractFileFilter) { allSlProjectContractFiles(filter:$filter) { nodes { id pid uid filename createtime filepath } } }",
					"variables": {
						"filter": {
							"pid": {
								"equalTo": this.pid
							}
						}
					}
				})
				if (files.data.allSlProjectContractFiles.nodes != '') {

					this.lists = files.data.allSlProjectContractFiles.nodes
				}
			},
			downLoadFile(url) {
				uni.showLoading({
					title: '打开中...',
				})
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								uni.hideLoading()
								console.log('打开文档成功');
							},
							fail: (e) => {
								uni.hideLoading()
								console.log(e);
							},
						});
					},
					fail: function(err) {
						uni.showLoading({
							title: '打开失败',
						})
						uni.hideLoading()
						// 提示：预览文件失败
					},
				});
			}


		}
	}
</script>

<style lang="scss">
	.u-page {
		background-color: #FBFCFE;
	}

	.header {
		width: 100%;
		height: 200px;
		/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5);
		/* 标准的语法 */

	}

	.content {
		position: relative;
		top: -200px;

		margin: 15px;

		.projectList {
			background-color: #FFFFFF;
			border-radius: 5px;
			min-height: 500px;
			padding: 22px 16px;

			.label {
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #161E3E;
				line-height: 16px;
				margin-bottom: 28px;
			}

			.lists {
				margin-top: 8px;
				display: flex;
				border-bottom: 1px solid #D7D7D7;
				height: 30px;
				justify-content: space-between;
			}

			.list_contnet {
				flex: 1;
				width: 200px;
				margin-left: 10px;
			}

			.filename {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #161E3E;
				line-height: 16px;
			}

			.chakan {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #007AFF;
				line-height: 16px;
				margin-right: 10px;
			}

			image {
				width: 22px;
				height: 22px;
			}

		}

		.upFiles {
			margin-top: 40px;
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		}
	}
</style>
